<template>
  <div>
    <!--
      el-form  - 表单
      :model="shop" - 与模型数据绑定
      ref="shopForm" - 给form取一个名字，方便验证数据格式
      :rules="formRules" - 校验规则
      label-position="left" - 标签位置靠左
      label-width="100px" - 标签宽度100px
      class="demo-ruleForm login-container" - 不用管
    -->
    <!--
      el-form-item - 表单项
        prop="name" - 如果当前字段要进行校验，就必须写，出现*
        label="名称" - 标签名

      el-input - 输入框
        type="text" - 文本框
        v-model="shop.name"  - 数据双向绑定
        auto-complete="off"  - 关闭自动完成
        placeholder="请输入店铺名称！" - 提示语
    -->
    <el-form  ref="shopForm"  label-position="left" label-width="100px" class="demo-ruleForm login-container">
      <h3 class="title">店铺入驻激活</h3>

      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:50%;" @click.native.prevent="activate" >激 活</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  //模型数据
  data() {
    return {

    }
  },
  //方法
  methods: {
    //点击激活按钮的业务逻辑
    activate(){
      //获取地址栏地址 - 例子：http://localhost:8081/#/activate?45
      var href = window.location.href;
      //截取获取id值 - 截取最后一个?号到最后就是id值
      var id = href.substr(href.lastIndexOf("?")+1);

      this.$confirm('确认激活吗？', '提示', {}).then(() => {
        //为了后台好接收，封装一个对象放到里面
        this.$http.get("/shop/activate/" + id).then((res) => {
          if (res.data.success){
            this.$message.success("激活成功！请登录！");
            //跳转登录页面
            this.$router.push({ path: '/login' });
          }else {
            this.$message.error("激活失败！请稍后再试！");
          }
        }).catch(res => {
          this.$message.error("系统繁忙！请稍后再试！");
        })
      });
    }
  },
  mounted() {

  }
}

</script>
<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 500px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}

.map {
  width: 100%;
  height: 300px;
}
.searchinput{
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
}
</style>